<template>
  <div class="hotel-portal-wrapper">
    <v-header ref="header" title="酒店"></v-header>
    <div ref="main" class="hotel-portal">
      <div class="banner"></div>
      <div class="form">
        <div class="inline" @click="showSelectAddress = true">
          <p style="font-size: 16px; color: #333;">{{area.name}}</p>
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
        <div class="inline" @click="showCalendar = true">
          <div class="date-select">
            <p class="date">{{startDate.format}}
              <span class="date-str">{{startDate.str}}</span>
            </p>
            <p class="divider">-</p>
            <p class="date">{{endDate.format}}
              <span class="date-str">{{endDate.str}}</span>
            </p>
          </div>
          <p>
            <span style="font-size: 18px; color: #333;">{{diffDay}}晚</span>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
          </p>
        </div>
        <div class="inline" @click="showSearch = true">
          <p class="tip" :style="{color: keywordAndTrade != '' ? '#333' : ''}">{{ keywordAndTrade != '' ? keywordAndTrade : '关键词/热门商圈' }}</p>
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
        <div class="inline" @click="toShowPriceLevel">
          <p class="tip" :style="{color: priceAndLevel != '' ? '#333' : ''}">{{ priceAndLevel != '' ? priceAndLevel : '价格/星级'}}</p>
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
        <div class="btn" @click="submitQuery">查询</div>
      </div>

      <div class="hotel-list-wrapper" :style="{paddingBottom: paddingBottom + 'px'}">
        <p class="title">精选酒店</p>
        <ul class="hotel-list">
          <li v-for="hotel in hotelList" :key="hotel.id" @click="clickHotelItem(hotel.id)">
            <div class="thumb" v-lazy:backgroundImage="hotel.thumbnailId"></div>
            <div class="right">
              <p class="name">{{hotel.name}}</p>
              <p class="address">
                <i class="icon iconfont icon-hotel-address"></i>{{hotel.address}}</p>
              <div class="bottom">
                <p class="price">￥
                  <span>{{hotel.floorPrice}}</span>起</p>
                <p class="rate">{{hotel.commentScore}}分</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <address-selector v-model="showSelectAddress" @selectArea="selectArea" :current="area.id" @clear="clearArea"></address-selector>

    <div v-transfer-dom>
      <popup v-model="showCalendar" position="bottom" width="100%" class="popup-wrapper">
        <div style="overflow: hidden; position: relative; background: #fff; padding-bottom: 24px;">
          <calendar :zero="calendarOpt.zero" :range="calendarOpt.range" :lunar="calendarOpt.lunar" :value="calendarOpt.value" :begin="calendarOpt.begin" :end="calendarOpt.end" @select="calendarOpt.select"></calendar>
        </div>
      </popup>
    </div>

    <global-search v-model="showSearch" type="cart" :range="[0, 1, 2, 3]"></global-search>

    <div v-transfer-dom>
      <popup v-model="showPriceLevel" @on-hide="resetPriceLevel" position="bottom" width="100%" class="popup-wrapper">
        <div style="position: relative; padding: 9px 12px 68px 12px; background: #fff; color: #333;" :style="{paddingBottom: paddingBottom + 68 + 'px'}">
          <p style="font-size: 16px; margin-top: 20px">
            价格范围：
            <b style="color: #00ceb9">￥{{tempPrice[0]}} - {{tempPrice[1] >= 500 ? '不限':tempPrice[1]}}</b>
            <span style="font-size: 12px">元/间</span>
          </p>
          <range v-model="tempPrice" :step="100" :max="500" @on-change="priceChange" :customStops="['￥0', '￥100', '￥200', '￥300', '￥400', '不限']" show-stops range>
          </range>

          <p style="padding: 28px 0 6px;">酒店等级</p>
          <checker v-model="tempLevel" type="checkbox" default-item-class="checker-item" selected-item-class="checker-item-selected">
            <checker-item v-for="item in hotelLevel" :key="item.value" :value="item.value">{{item.label}}</checker-item>
          </checker>
          <div :style="{paddingBottom: paddingBottom + 'px'}" style="position: absolute; left: 0; bottom: 0; right: 0; box-shadow: 0 0 10px #e9e9e9; display: flex; text-align: center; height: 40px; line-height: 40px;">
            <p @click.stop="resetPriceLevel" style="width: 40%; background: #fff;">重置筛选</p>
            <p @click.stop="submitPriceLevel" style="width: 60%; background: #00ceb9; color: #fff">显示结果</p>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import AddressSelector from '@/components/address-selector/address-selector'
import Calendar from '@/components/calendar/calendar'
import GlobalSearch from '@/components/global-search/global-search'
import Range from '@/components/range/range'
import { TransferDom, Popup, Checker, CheckerItem } from 'vux'

import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'HotelPortal',
  mixins: [handleBackMixin],
  data() {
    return {
      showCalendar: false,
      showSelectAddress: false,
      showSearch: false,
      showPriceLevel: false,
      area: {
        id: '',
        name: '选择地区'
      },
      calendarOpt: {
        zero: true,
        range: true,
        lunar: true, // 显示农历
        begin: this.moment()
          .add(1, 'months')
          .toArray()
          .slice(0, 3),
        // end: this.moment().add(30, 'days').toArray().slice(0, 3),
        weeks: ['日', '一', '二', '三', '四', '五', '六'],
        select: (begin, end) => {
          if (this.showCalendar === false) return
          this.showCalendar = false

          const beginDate = this.moment(begin).subtract(1, 'months')
          const endDate = this.moment(end).subtract(1, 'months')
          const today = this.moment()
            .toArray()
            .slice(0, 3)

          const startDiff = beginDate.diff(today, 'days')
          const endDiff = endDate.diff(today, 'days')

          this.startDate = {
            date: beginDate,
            format: beginDate.format('MM月DD日'),
            str: startDiff === 0 ? '今天' : beginDate.format('ddd')
          }
          this.endDate = {
            date: endDate,
            format: endDate.format('MM月DD日'),
            str: endDiff === 1 ? '明天' : endDate.format('ddd')
          }
        }
      },
      startDate: {
        date: this.moment(),
        format: this.moment().format('MM月DD日'),
        str: '今天'
      },
      endDate: {
        date: this.moment().add(1, 'days'),
        format: this.moment()
          .add(1, 'days')
          .format('MM月DD日'),
        str: '明天'
      },
      keyword: '',
      trade: '',
      price: [0, 500],
      level: [],
      tempPrice: [0, 500],
      tempLevel: [],
      hotelLevel: [
        {
          value: 5,
          label: '五星/豪华'
        },
        {
          value: 4,
          label: '四星/高端'
        },
        {
          value: 3,
          label: '三星/舒适'
        },
        {
          value: 0,
          label: '一般/经济'
        }
      ],
      hotelList: [],
      allDisabledBack: true,
      allPopupModels: ['showCalendar', 'showSelectAddress', 'showSearch', 'showPriceLevel']
    }
  },
  computed: {
    diffDay() {
      return Math.abs(this.startDate.date.diff(this.endDate.date, 'days'))
    },
    keywordAndTrade() {
      let str = ''
      if (this.keyword !== '' && this.trade !== '') {
        str = this.keyword + '/' + this.trade
      } else if (this.keyword !== '' || this.trade !== '') {
        str = this.keyword + this.trade
      }
      return str
    },
    priceAndLevel() {
      let levelStr = ''
      if (this.level.length > 0) {
        for (let i = 0; i < this.level.length; i++) {
          const lvObj = this.hotelLevel.find(o => o.value === this.level[i])
          if (lvObj) {
            const label = lvObj.label.split('/')[1]
            levelStr === ''
              ? (levelStr = label)
              : (levelStr += '、' + label)
          }
        }
      }
      let priceStr = ''
      if (this.price[0] > 0 || this.price[1] < 500) {
        priceStr = '￥' + this.price[0] + '~￥' + this.price[1]
      }

      if ((this.price[0] > 0 || this.price[1] < 500) > 0 && this.level.length > 0) {
        return priceStr + '/' + levelStr
      }
      if (this.price[0] > 0 || this.price[1] < 500) {
        return priceStr
      }
      if (this.level.length > 0) {
        return levelStr
      }
      return ''
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    AddressSelector,
    Calendar,
    Popup,
    GlobalSearch,
    Range,
    Checker,
    CheckerItem
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    this._getHotelList()
  },
  mounted() {
    this.$refs.main.style.height =
      window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  methods: {
    _getHotelList() {
      axios.get(
        this,
        '/v1/recommendHotel',
        {
          pageSize: 5
        },
        data => {
          this.hotelList = data
        }
      )
    },
    selectArea(area) {
      this.showSelectAddress = false
      this.area = area
    },
    clearArea() {
      this.area = {
        id: '',
        name: '地区'
      }
      this.showSelectAddress = false
    },
    toShowPriceLevel() {
      this.tempPrice = this.price.concat([])
      this.tempLevel = this.level.concat([])
      this.showPriceLevel = true
    },
    priceChange(val) {
      this.tempPrice = val
      if (this.tempPrice[1] <= this.tempPrice[0]) {
        this.tempPrice[1] = this.tempPrice[0] + 100
      }
      if (this.tempPrice[0] >= 500) {
        this.tempPrice[0] = 500
      }
    },
    resetPriceLevel() {
      // 去除tempPriceSort和priceSort的双向绑定
      this.tempPrice = [0, 500]
      this.tempLevel = []
    },
    submitPriceLevel() {
      this.price = this.tempPrice.concat([])
      this.level = this.tempLevel.concat([])
      this.showPriceLevel = false
    },
    submitQuery() {
      this.$router.push({
        path: '/hotelList',
        query: {
          areaId: this.area.id,
          startDate: this.startDate.date.format('YYYY-MM-DD'),
          endDate: this.endDate.date.format('YYYY-MM-DD'),
          keyword: this.keyword,
          trade: this.trade,
          price: this.price.join(','),
          level: this.level.join(',')
        }
      })
    },
    clickHotelItem(id) {
      this.$router.push(`/hotel/${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.checker-item
  width 24.5%
  padding 12px 0
  text-align center
  line-height 1
  font-size $font-size-desc
  border 1px solid #ccc
  margin-right -1px
  background-color #fff
.checker-item-selected
  border-color $color-theme
  background-color #e5faf8
  background-image url('../../../../../static/img/icon/checked.png')
  background-repeat no-repeat
  background-position right bottom
  background-size 15px
.checker-item-selected + .checker-item
  border-left-color $color-theme
.hotel-portal-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.hotel-portal
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
  .banner
    width 100vw
    height 50vw
    background-image url('../../../../assets/img/hotel-portal-banner.jpg')
    background-size cover
    background-repeat no-repeat
    background-position center
  .form
    margin -48px 16px 16px 16px
    padding-left 16px
    padding-bottom 16px
    border-radius 5px
    background #ffffff
    .inline
      display flex
      justify-content space-between
      align-items center
      border-bottom 0.5px solid #e2e2e2
      height 48px
      line-height 48px
      i
        font-size 18px
        color #999999
        margin-left 4px
        margin-right 16px
      .date-select
        display flex
        align-items center
        .date
          font-size 18px
          color #333333
        .date-str
          font-size 13px
          color #999999
          margin-left 8px
        .divider
          font-size 18px
          margin 0 8px
      .tip
        color #999999
        font-size 16px
        no-wrap()
    .btn
      height 44px
      line-height 44px
      border-radius 5px
      font-size 17px
      color #ffffff
      background $color-theme
      margin-right 16px
      margin-top 16px
      text-align center
      &:hover
        background $color-theme-1
  .hotel-list-wrapper
    padding 20px 0
    margin-top 16px
    background #ffffff
    .title
      font-size 20px
      color #333333
      font-weight bold
      line-height 1
      padding-bottom 20px
      padding-left 16px
    .hotel-list
      li
        display flex
        justify-content space-between
        padding 16px
        border-bottom 0.5px solid #e2e2e2
        &:last-child
          border-bottom none
        &:first-child
          padding-top 0
      .thumb
        width 125px
        height 94px
        background-size cover
        background-repeat no-repeat
        background-position center
        border-radius 3px
      .right
        width calc(100% - 137px)
        position relative
      .name
        margin-top 2px
        line-height 1.3
        font-size 16px
        color #333333
        no-wrap()
      .address
        margin-top 8px
        font-size 12px
        line-height 1
        color #999999
        height 14px
        no-wrap()
        i
          margin-right 4px
          font-size 11px
      .bottom
        display flex
        justify-content space-between
        align-items center
        position absolute
        bottom 0
        left 0
        right 0
        line-height 1
        .price
          color $color-theme
          font-size 12px
          span
            font-size 20px
            margin-right 2px
            margin-left -1px
        .rate
          color $color-level
          font-size 14px
</style>
